<template>
  <div class="vue_demo">
    <p>hello vuedemo</p>
    <p>
      <input type="checkbox" id="checkbox" v-model="checked"> 
      <label for="checkbox">{{checked}}</label>
    </p>
    <p>
      <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="lucy" value="lucy" v-model="checkedNames">
      <label for="lucy">Lucy</label>
      <input type="checkbox" id="ice" value="ice" v-model="checkedNames">
      <label for="ice">Ice</label>
      <br>
      <span>Cheked names: {{checkedNames}}</span>
    </p>
    <div class="myInput">
      <input type="text" v-model.number="message" placeholder="edit me" >
    </div>
    <p>MSG IS: {{message}}</p>
    <p>{{msg.split('').reverse().join('')}}</p>
    <p>{{getMsg}} computed</p>
    <p>{{mMsg()}} methods</p>
    <div :class="{'active':isActive,'text-danger':hasError}">css</div>
    <!-- <div :class='active:fl'></div> -->
    <div :class="{c1_1:c1,c2:c2}">c1c2</div>
    <div :class="cssObj">cssObj</div>
    <button @click="switchCss">切换css</button>
    <div :class="[isActive ? activeClass : '',errorClass]">数组css</div>
    <div class="old" :class="[{'test':flag},isActive ? msg+'-111' : 'noactive']">应用中的样式</div>
    <div :style="{color:color,fontSize:'40px'}">style</div>
  </div>
</template>

<script>
export default {
  name: "vuedemo",
  data() {
    return {
      checkedNames:[],
      checked:false,
      message:'',
      msg: "hello",
      classDemo: "active",
      flag: true,
      isActive: true,
      hasError: true,
      c1:true,
      c2:true,
      cssObj:{
        co1:true,
        'co2':false
      },
      color:'green',
      activeClass:'active',
      errorClass:'error'
    };
  },
  computed: {
    getMsg() {
      return this.msg
        .split("")
        .reverse()
        .join("");
    }
  },
  watch:{
    message(data){
      console.log(data);
    }
  },
  methods: {
    mMsg() {
      return this.msg
        .split("")
        .reverse()
        .join("");
    },
    switchCss(){
      // this.c1=!this.c1;
      this.cssObj['co1']=!this.cssObj['co1'];
    }
  }
};
</script>

<style>
.active {
  color: red;
}
</style>